<script setup lang='ts'>
import type { ISetPointsRule } from '@fl/api/anjutong/model/memberpoints-model'

import { PointsOverview, PointsRule, setPointsRule } from '@fl/api/anjutong'

import EditForm from './edit-form.vue'
import { nameEnum } from './type'

const overview = ref()
const ruleTable = ref([
])

const pointTable = ref([
])
const pointTableLoading = ref(false)
const state = ref({
    id: '',
    isOpen: 1,
    num1: 0,
    num2: 0,
    ruleInfo: '1',
})
const submitLoading = ref(false)
async function getPointsOverview() {
    try {
        const data = await PointsOverview()
        overview.value = data
    }
    catch (error) {

    }
}
async function getPointsRule() {
    try {
        ruleTable.value = await PointsRule({ ruleType: '1' })// 基础规则
        pointTable.value = await PointsRule({ ruleType: '2' })// 积分设置规则
        submitLoading.value = false
        centerDialogVisible.value = false
        pointTableLoading.value = false
    }
    catch (error) {
        pointTableLoading.value = false
    }
}

getPointsOverview()
getPointsRule()

const centerDialogVisible = ref(false)
const formType = ref()
const formRuleNo = ref()
function setting(row: any) {
    formType.value = nameEnum[row?.ruleNo]?.label
    formRuleNo.value = row?.ruleNo
    nameEnum[row?.ruleNo].formatRuleInfo(row?.ruleInfo, state.value)
    state.value.id = row?.id
    state.value.isOpen = row?.isOpen
    centerDialogVisible.value = true
}
function resetFormParams() {
    state.value = {
        id: '',
        isOpen: 1,
        num1: 0,
        num2: 0,
        ruleInfo: '1',
    }
}
async function formSubmit() {
    try {
        submitLoading.value = true
        const options: ISetPointsRule = {
            id: Number(state.value.id),
            isOpen: Number(state.value.isOpen),
            ruleInfo: nameEnum[formRuleNo.value].formatForm(state.value, getMinNum(formRuleNo.value)),
        }
        console.log('🚀 ~ formSubmit ~ options:', options)
        await setPointsRule(options)
        getPointsRule()
    }
    catch (error) {
        submitLoading.value = false
        centerDialogVisible.value = false
    }
}
async function changeStatus(row: any) {
    pointTableLoading.value = true
    try {
        const options: ISetPointsRule = {
            id: row.id,
            isOpen: row.isOpen === 1 ? 0 : 1,
            ruleInfo: row.ruleInfo,
        }
        await setPointsRule(options)
        await getPointsRule()
        ElMessage.success('修改成功')
    }
    catch (error) {
        pointTableLoading.value = false
    }
}
function getMinNum(num: number) {
    if (num === 1 || num === 4)
        return 1

    return 0
}
</script>

<template>
    <div class="mb-30 bg-white px-30 py-20">
        <el-row>
            <el-col :span="6">
                <el-statistic title="累计发放积分"
                              :value="Number(overview?.productPoints ?? 0)"
                              value-style="color:#53a5d1"
                />
            </el-col>

            <el-col :span="6">
                <el-statistic title="累计消耗积分"
                              :value="Number(overview?.consumePoints ?? 0)"
                              value-style="color:#53a5d1"
                />
            </el-col>

            <el-col :span="6">
                <el-statistic title="保护期内积分"
                              :value="Number(overview?.protectPoints ?? 0)"
                              value-style="color:#53a5d1"
                />
            </el-col>

            <el-col :span="6">
                <el-statistic title="未使用积分"
                              :value="Number(overview?.unusedPoints ?? 0)"
                />
            </el-col>
        </el-row>
    </div>

    <div class="flex flex-col gap-30 bg-white px-30 py-30">
        <div>通用规则设置</div>

        <vxe-table align="center"
                   border
                   :data="ruleTable"
        >
            <vxe-column field="ruleName"
                        title="规则名称"
                        min-width="50"
            />

            <vxe-column field="ruleDetail"
                        title="规则详情"
                        min-width="200"
            >
                <template #default="{ row }">
                    {{ nameEnum[row.ruleNo].formatDetail(row) }}
                </template>
            </vxe-column>

            <vxe-column field="updateTime"
                        title="更改时间"
                        min-width="50"
            />

            <vxe-column field="operation"
                        min-width="50"
                        title="操作"
            >
                <template #default="{ row }">
                    <el-button @click="setting(row)">
                        设置
                    </el-button>
                </template>
            </vxe-column>
        </vxe-table>

        <div>奖励积分设置</div>

        <vxe-table align="center"
                   border
                   :data="pointTable"
                   :loading="pointTableLoading"
        >
            <vxe-column field="ruleName"
                        title="规则名称"
                        min-width="50"
            />

            <vxe-column field="ruleDetail"
                        title="规则详情"
                        min-width="200"
            >
                <template #default="{ row }">
                    {{ nameEnum[row.ruleNo].formatDetail(row) }}
                </template>
            </vxe-column>

            <vxe-column field="updateTime"
                        title="更改时间"
                        min-width="50"
            />

            <vxe-column field="status"
                        title="状态"
                        min-width="50"
            >
                <template #default="{ row }">
                    <vxe-switch :model-value="row?.isOpen === 1"
                                open-label="开"
                                close-label="关"
                                @change="changeStatus(row)"
                    />
                </template>
            </vxe-column>

            <vxe-column field="operation"
                        min-width="50"
                        title="操作"
            >
                <template #default="{ row }">
                    <el-button @click="setting(row)">
                        设置
                    </el-button>
                </template>
            </vxe-column>
        </vxe-table>
    </div>

    <el-dialog v-model="centerDialogVisible"
               :title="formType"
               width="800"
               destroy-on-close
               align-center
               :close-on-click-modal="false"
               @close="resetFormParams"
    >
        <EditForm :state="state"
                  :formruleno="formRuleNo"
                  :submitloading="submitLoading"
                  @close="centerDialogVisible = false"
                  @submit="formSubmit"
        />
    </el-dialog>
</template>

<style scoped>
.el-col {
    text-align: center;
}

:deep(.el-statistic__head) {
    font-size: 14px;
    color: #9f9f9f;
    margin-bottom: 10px;
}
</style>
